<template>
	<view class="qrcode">
		<!-- <scanQrCode v-if="scanFlag" @qrCode="qrCode" /> -->
		<ZxingQrCode v-if="scanFlag" @qrCode="qrCode" />
		<view class="main" v-else>
			<animated />
			<u-navbar leftText="返回" title="产品溯源" :bgColor="bgColor" :titleStyle="titleStyle" leftIconColor="#FFF"
				:autoBack="true" :placeholder="true">
			</u-navbar>
			<view class="card form_card">
				<u-cell-group :border="false">
					<u-cell title="订单编号" :value="workOrderInfo.workOrderCode" center></u-cell>
					<u-cell title="产品品号" :value="workOrderInfo.itemCode" center></u-cell>
					<u-cell title="产品品名" :value="workOrderInfo.itemName" center></u-cell>
					<u-cell title="预计开始时间" :value="workOrderInfo.dueStartTime" center></u-cell>
					<u-cell title="预计完成时间" :value="workOrderInfo.dueEndTime" center></u-cell>
					<u-cell title="交付日期" :value="workOrderInfo.deliveryDate" center></u-cell>
					<u-cell title="制单人" :value="workOrderInfo.buildUserName" center :border="false"></u-cell>
				</u-cell-group>
			</view>
			<view class="card steps_card">
				<u-steps class="steps" :current="qrCodeList.length - 1" direction="column" activeColor="#FF6601"
					active-icon="checkmark-circle-fill" inactive-icon="clock-fill">
					<template v-for="(item, index) in qrCodeList">
						<!-- 						<u-steps-item :title="item.dictLabel" v-if="workOrderInfo.produceStatus == item.dictValue">
							<u-icon slot="icon" name="clock-fill" color="#FF6601" size="17"></u-icon>
						</u-steps-item> -->
						<u-steps-item :title="item.processName" :desc="item.startTime" />
					</template>
					<!-- <u-steps-item title="正在制造···" desc="" /> -->
				</u-steps>
			</view>
		</view>
	</view>
</template>

<script>
	import scanQrCode from '@/components/scanQrCode/scanQrCode.vue' //引入
	import ZxingQrCode from '@/components/scanQrCode/ZxingQrCode.vue' //引入
	import animated from '@/components/animated/animated.vue'
	import {
		getQrCodeHistoryApi,
		getWorkOrderInfoApi
	} from '../../api/api';
	export default {
		components: {
			scanQrCode,
			ZxingQrCode,
			animated
		},
		data() {
			return {
				bgColor: '#FF6601',
				titleStyle: {
					color: '#FFF'
				},
				scanFlag: true,
				qrCodeList: [],
				workOrderInfo: {}
			};
		},
		onLoad() {
			// this.getqrCodeHistory();
			// this.getQrCodeHistory('1890669478966149120')
		},
		methods: {
			goIndex() {
				uni.showToast({
					icon: 'error',
					title: '查询失败！',
					duration: 1500
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1600)
			},
			qrCode(code) {
				console.log('qrCode =>', code)
				uni.showLoading({
					title: '查询中...'
				})
				this.getQrCodeHistory(code)
			},
			getQrCodeHistory(item) {
				getQrCodeHistoryApi(item).then(res => {
					if (res.code == 200) {
						let workOrderId = res.data.mesReportWorkVoList[0].workOrderId
						this.qrCodeList = res.data.mesReportWorkVoList
						if (workOrderId) {
							this.getWorkOrderInfo(workOrderId)
						}
					} else {
						uni.hideLoading()
						this.goIndex()
					}
				}).catch(error => {
					uni.hideLoading()
					this.goIndex()
				});
			},
			async getWorkOrderInfo(item) {
				this.scanFlag = false
				let res = await getWorkOrderInfoApi(item).then(res => {
					if (res.code == 200) {
						this.workOrderInfo = res.data
						uni.hideLoading()
					} else {
						uni.hideLoading()
						this.goIndex()
					}
				}).catch(error => {
					uni.hideLoading()
					this.goIndex()
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.qrcode {
		width: 100vw;
		height: 100vh;

		.main {
			position: relative;
			z-index: 0;
			width: 100%;
			height: 100%;

			.card {
				width: calc(100% - 30px);
				margin: 20px 15px;
				border-radius: 8px;
				background-color: #FFF;

				.steps {
					width: calc(100% - 30px);
					padding: 10px 15px;
				}
			}
		}
	}
</style>